<template>
  <div class="admin-dashboard">
    <div class="page-header">
      <h1>管理仪表盘</h1>
      <p>欢迎回来，{{ userStore.userInfo?.username }}！</p>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon user">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.totalUsers }}</div>
              <div class="stat-label">总用户数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon active">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.activeUsers }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
    </el-row>

    <!-- 快捷操作 -->
    <el-row :gutter="24" class="quick-actions">
      <el-col :xs="24" :md="12">
        <el-card>
          <template #header>
            <span class="card-title">快捷操作</span>
          </template>
          <div class="action-grid">
            <el-button 
              type="primary" 
              class="action-btn"
              @click="$router.push('/admin/user-manage')"
            >
              <el-icon><UserFilled /></el-icon>
              用户管理
            </el-button>
            
            <el-button 
              type="success" 
              class="action-btn"
              @click="showCreateUserDialog = true"
            >
              <el-icon><Plus /></el-icon>
              新增用户
            </el-button>
            
          </div>
        </el-card>
      </el-col>
      
      
    </el-row>

    <!-- 创建用户对话框 -->
    <el-dialog
      v-model="showCreateUserDialog"
      title="创建新用户"
      width="500px"
      destroy-on-close
    >
      <el-form
        ref="createUserFormRef"
        :model="createUserForm"
        :rules="createUserRules"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="createUserForm.username"
            placeholder="请输入用户名"
          />
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="createUserForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="createUserForm.email"
            placeholder="请输入邮箱"
          />
        </el-form-item>
        
        <el-form-item label="角色" prop="role">
          <el-select v-model="createUserForm.role" placeholder="请选择角色">
            <el-option label="普通用户" :value="1" />
            <el-option label="管理员" :value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="showCreateUserDialog = false">取消</el-button>
        <el-button
          type="primary"
          :loading="createUserLoading"
          @click="handleCreateUser"
        >
          创建
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  Check,
  Document,
  Folder,
  Plus,
  Setting,
  Bell
} from '@element-plus/icons-vue'
import userManageApi from '@/api/userManage'

const userStore = useUserStore()

// 统计数据
const stats = reactive({
  totalUsers: 0,
  activeUsers: 0,
})



// 创建用户相关
const showCreateUserDialog = ref(false)
const createUserLoading = ref(false)
const createUserFormRef = ref()

const createUserForm = reactive({
  username: '',
  password: '',
  email: '',
  role: 1
})

const createUserRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
}

// 加载统计数据
const loadStats = async () => {
  try {
    // 获取用户统计
    const userResponse = await userManageApi.pageUsers({ 
      current: 1, 
      size: 1000 
    })
    
    if (userResponse.code === 200) {
      stats.totalUsers = userResponse.data.total
      stats.activeUsers = userResponse.data.records.filter(user => user.status === 1).length
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 创建用户
const handleCreateUser = async () => {
  if (!createUserFormRef.value) return

  await createUserFormRef.value.validate(async (valid) => {
    if (valid) {
      createUserLoading.value = true
      try {
        const response = await userManageApi.createUser(createUserForm)
        if (response.code === 200) {
          ElMessage.success('用户创建成功')
          showCreateUserDialog.value = false
          // 重置表单
          Object.assign(createUserForm, {
            username: '',
            password: '',
            email: '',
            role: 1
          })
          // 刷新统计数据
          await loadStats()
        } else {
          ElMessage.error(response.message || '用户创建失败')
        }
      } catch (error) {
        ElMessage.error(error.message || '用户创建失败')
      } finally {
        createUserLoading.value = false
      }
    }
  })
}

onMounted(() => {
  loadStats()
})
</script>

<style lang="scss" scoped>
.admin-dashboard {
  .page-header {
    margin-bottom: 24px;
    
    h1 {
      font-size: 24px;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #606266;
      margin: 0;
    }
  }
  
  .stats-cards {
    margin-bottom: 24px;
    
    .stat-card {
      margin-bottom: 16px;
      
      .stat-content {
        display: flex;
        align-items: center;
        gap: 16px;
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          color: white;
          
          &.user {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          }
          
          &.active {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }
          
          &.file {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
          
          &.storage {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }
        }
        
        .stat-info {
          .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
            line-height: 1;
          }
          
          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-top: 4px;
          }
        }
      }
    }
  }
  
  .quick-actions {
    .card-title {
      font-weight: 600;
      color: #303133;
    }
    
    .action-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      
      .action-btn {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        
        .el-icon {
          font-size: 24px;
        }
      }
    }
    
    .activity-list {
      .activity-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .activity-icon {
          width: 32px;
          height: 32px;
          background: #f5f7fa;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #909399;
          font-size: 14px;
        }
        
        .activity-content {
          flex: 1;
          
          .activity-title {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .activity-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .admin-dashboard {
    .action-grid {
      grid-template-columns: 1fr !important;
    }
  }
}
</style> 